<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>石头剪刀布</title>
  <style>
    .box {
      width: 350px;
      height: 400px;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      border: 1px dashed black;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      background-color: rgb(211, 203, 203);
      overflow-y: auto;
    }
    .box::-webkit-scrollbar {
      display: none;
      width: 5px;
      height: 8px;
    }
    .box::-webkit-scrollbar-thumb {
      height: 20px;
      background: rgb(176 169 169);
      border-radius: 8px;
    }
    /* .box:hover::-webkit-scrollbar {
      display: initial;
    } */

    .normal {
      color: #1989fa;
    }
    .fail {
      color: #f44;
    }
    .success {
      color: #07c160;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <button type="rock">石头</button>
  <button type="scissor">剪刀</button>
  <button type="paper">布</button>
  <button type="badguy">耍赖</button>

  <script>
    // 将 HTML 字符串解析成 DocumentFragment
    function parseToDOM(htmlstring) {
      const tpl = document.createElement('template');
      tpl.innerHTML = htmlstring;
      return tpl.content;
    }

    const box = document.querySelector('.box');

    document.querySelectorAll('button').forEach(el => {
      el.onclick = () => {
        const type = el.getAttribute('type');
        fetch(`/game?action=${type}`)
          .then(async (res) => {
            if (res.ok) {
              return res.text();
            }
            throw await res.text();
          })
          .then(res => {
            const el = parseToDOM(`${res}<br/>`);
            box.append(el);
          })
          .catch(err => {
            alert(err);
          })
      }
    })
  </script>
</body>

</html>
